<template>
  <div class="detail">
    <!-- 主图轮播 -->
    <div class="swiper-container">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          v-for="photo in mainPhoto"
          :key="photo.id"
        >
        <img v-lazy="photo.url">
      </van-swipe-item>
    </van-swipe>
  </div>

<!-- 商品名称，价格 -->
<div>
  <span class="title">{{goodsInfo.title}}</span>
  <div class="sale-info">
    <span class="price">￥{{goodsInfo.price}}元</span>
    <span class="buyed">{{goodsInfo.saleNum}}人已购买</span>
  </div>
</div>

<!-- 分割线 -->
<van-divider>商品图文详情</van-divider>

<!-- 图文详情 -->
<div class="detail-content">
  <img
    v-for="item in detailImgs"
    :key="item.image.id"
    v-lazy="item.image.url"
  >
  <!-- tabbar -->
  <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="total" @click="jumpToCart"/>
      <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
      <van-goods-action-button type="warning" text="加入购物车" @click="addToCartHandler"/>
      <van-goods-action-button type="danger" text="立即购买" />
  </van-goods-action>
</div>
  </div>
</template>

<script>
import { getDetail } from '@/api/detail'
export default {
  name: 'Detail',
  data () {
    return {
      mainPhoto: [],
      detailImgs: [],
      goodsInfo: []
    }
  },
  computed: {
    total () {
      return this.$store.getters.totalCount
    }
  },
  created () {
    console.log(this)
    getDetail(this.$route.params.id)
      .then(res => {
        console.log('响应数据', res)
        this.goodsInfo = res
        this.mainPhoto = res.photo
        this.detailImgs = res.descContentList.filter(item => item.photo)
        // console.log(this.detailImgs)
      })
  },
  methods: {
    addToCartHandler () {
      const { id, title, thumbnail, price } = this.goodsInfo
      const payload = {
        id,
        title,
        desc: title,
        img: thumbnail,
        amount: 1,
        price
      }
      this.$store.commit('addToCart', payload)
    },
    jumpToCart () {
      this.$router.push('/cart')
    }
  }
}
</script>

<style lang="scss" scoped>
  .swiper-container{
    width: 100%;
    height: 0;
    padding-top: 100%;
    position: relative;
  }
  .my-swipe {
    position: absolute;
    top:0;
    bottom: 0;
    right: 0;
    left: 0;

    .van-swipe-item {
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
  .detail-content{
    img{
      width: 100%;
    }
  }

  .title{
        font-weight: 500;
        font-size: 14px;
        line-height: 18px;
      }
      .sale-info{
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        .price{
          height: 20px;
          line-height: 20px;
          font-size: 16px;
          display: inline-block;
          background: orangered;
          color:white;
          font-weight: 500;
          padding-right: 5px;
        }
        .buyed{
          font-size: 14px;
          color: #868686;
        }
      }
</style>
